<template>
  <div>
    <div v-if="topTabel" class="purchaseOrder">
      <template v-for="(value, index) in forTable" :key="index">
        <div class="purchaseOrder-boxOpmm">
          <div class="purchaseOrder-titleName">浙江宏竹塑胶五金有限公司</div>
          <div class="purchaseOrder-adderm">浙江省嘉善经济开发区武夷路18号</div>
          <div class="purchaseOrder-phonelist">TEL:0573-8911-0111 FAX:0573-8459-5998</div>
          <div class="purchaseOrder-optionName">杂物采购订单</div>
          <div>
            <a-row :gutter="24">
              <a-col :span="17">
                <div class="purchaseOrder-colsnpm">
                  <div class="purchaseOrder-colsnpm-titleName">采购单编号:</div>
                  <div>{{ topTabel?.type }}&nbsp; {{ topTabel?.id }}</div>
                </div>
                <div class="purchaseOrder-colsnpm">
                  <div class="purchaseOrder-colsnpm-titleName">厂商名称:</div>
                  <div>{{ topTabel?.supplier }}&nbsp; {{ topTabel?.supplierFullName }}</div>
                </div>
                <div class="purchaseOrder-colsnpm">
                  <div class="purchaseOrder-colsnpm-titleName">联络人:</div>
                  <div>余先生</div>
                </div>
                <div class="purchaseOrder-colsnpm">
                  <div class="purchaseOrder-colsnpm-titleName">联络电话:</div>
                  <div>电话:0512-57707339/电话二:13962645837/传真:0512-57192911</div>
                </div>
                <div class="purchaseOrder-colsnpm">
                  <div class="purchaseOrder-colsnpm-titleName">交货地点:</div>
                  <div>浙江省嘉善经济开发区武夷路18号</div>
                </div>
                <div class="purchaseOrder-colsnpm">
                  <div class="purchaseOrder-colsnpm-titleName">付款条件:</div>
                  <div>{{ topTabel?.paymentName }}</div>
                </div>
              </a-col>
              <a-col :span="7">
                <div class="purchaseOrder-colsnpm">
                  <div class="purchaseOrder-colsnpm-titleName">申请部门:</div>
                  <div>一车间生产课</div>
                </div>
                <div class="purchaseOrder-colsnpm">
                  <div class="purchaseOrder-colsnpm-titleName">印表日期:</div>
                  <div>{{ newData }}</div>
                </div>
                <div class="purchaseOrder-colsnpm">
                  <div class="purchaseOrder-colsnpm-titleName">采购日期:</div>
                  <div>{{ timeCange(topTabel?.purchaseDate) }}</div>
                </div>
                <div class="purchaseOrder-colsnpm">
                  <div class="purchaseOrder-colsnpm-titleName">币别:</div>
                  <div>{{ topTabel?.coinType }}</div>
                </div>
                <div class="purchaseOrder-colsnpm">
                  <div class="purchaseOrder-colsnpm-titleName">税别:</div>
                  <div>{{ categoriesTaxesList(topTabel?.taxType).label }} {{ multiplication({ x: topTabel?.tax, y: 100 }) }} %</div>
                </div>
              </a-col>
            </a-row>
          </div>
          <div class="purchaseOrder-tableppm">
            <a-row align="stretch">
              <a-col :flex="0.5">
                <div class="purchaseOrder-tableppm-itemTim">NO.</div>
              </a-col>
              <a-col :flex="7.5">
                <div class="purchaseOrder-tableppm-itemTim">产品名称/规格</div>
              </a-col>
              <a-col :flex="2">
                <div class="purchaseOrder-tableppm-itemTim">预定到货日</div>
              </a-col>
              <a-col :flex="2">
                <div class="purchaseOrder-tableppm-itemTim">
                  <div>
                    <div>采购数量</div>
                    <div>含税单价</div>
                  </div>
                </div>
              </a-col>
            </a-row>
            <a-row v-for="(value, index) in value" :key="index" align="stretch">
              <a-col :flex="0.5">
                <div class="purchaseOrder-tableppm-itemTim">{{ index + 1 }}</div>
              </a-col>

              <a-col :flex="7.5">
                <div class="purchaseOrder-tableppm-itemTim">
                  <div class="purchaseOrder-tableppm-itemTim-pdinag">
                    <div>{{ value.remark }}</div>
                  </div>
                </div>
              </a-col>

              <a-col :flex="2">
                <div class="purchaseOrder-tableppm-apmcaoisa">
                  {{ timeCange(value?.preDeliveryDate) }}
                </div>
              </a-col>
              <a-col :flex="2">
                <div class="purchaseOrder-tableppm-apmcaoisa">
                  <div>
                    <div>{{ value.purchaseNumber }}</div>
                    <div>{{ value.priceUnit }}</div>
                    <div>{{ value.purchasePrice }}</div>
                  </div>
                </div>
              </a-col>
            </a-row>
          </div>

          <a-row class="purchaseOrder-bottomcx" align="stretch">
            <a-col :span="20">
              <div class="purchaseOrder-bottomcx-hotttom">
                <a-row class="grid-demo" align="stretch">
                  <a-col :span="20">
                    <div class="purchaseOrder-bottomcx-hotttom-tipxoan">
                      <div>
                        <span class="purchaseOrder-bottomcx-hotttom-tipxoan-rember" style="padding: 5px">备注:</span>
                        {{ topTabel?.remark }}
                      </div>
                      <div style="font-size: 12px; padding-left: 50px">
                        本公司收货时间:早上8:00~11:30,下午13:30~17:00;超过时间后，请预先通知采购
                      </div>
                      <div style="font-size: 12px; padding: 5px">
                        材料必须符合ROHS及3P(DEHP,DBP,BBP)及美国玩具安全规定ASTM F 963有害物质限值环保要求,请依照产品规格栏
                      </div>
                    </div>
                  </a-col>
                  <a-col :span="4">
                    <div class="purchaseOrder-bottomcx-hotttom-tipxoan">
                      <div style="padding: 5px">收到订单,请务必于三天内签回,以便确认此订单!!</div>
                    </div>
                  </a-col>
                </a-row>
              </div>
              <div>
                <a-row align="stretch">
                  <a-col :span="24">
                    <div class="purchaseOrder-bottomcx-hotttom-tipxoan">
                      <div style="padding: 5px">
                        注意事项:不按期交货時,得取消一部份或全部订单:因此而蒙受的损失，由贵方负责赔偿，货品经由验收，因品置不良而发生退货，索赔案时，概由贵处负责赔偿.※1)需要符合反恐安全标准
                        .2)敞司六.日不收货!!
                      </div>
                    </div>
                  </a-col>
                </a-row>
              </div>
            </a-col>
            <a-col :span="4">
              <div class="purchaseOrder-bottomcx-singha">
                <div style="padding: 5px">厂商签章</div>
              </div>
            </a-col>
          </a-row>
          <a-row class="gonmz">
            <a-col :flex="2">
              <div class="pppmm">
                <div style="writing-mode: vertical-rl">总经理</div>
                <!-- <div><img style="width: 45px" src="@img/singe/1.png" /></div> -->
              </div>
            </a-col>
            <a-col :flex="2">
              <div class="pppmm">
                <div>
                  <div style="writing-mode: vertical-rl; height: 35px">副总经理</div>
                </div>
                <!-- <div><img style="width: 45px" src="@img/singe/2.png" /></div> -->
              </div>
            </a-col>
            <a-col :flex="2">
              <div class="pppmm">
                <div>
                  <div style="writing-mode: vertical-rl; height: 35px">经理</div>
                </div>
                <!-- <div><img style="width: 45px" src="@img/singe/3.png" /></div> -->
              </div>
            </a-col>
            <a-col :flex="2">
              <div class="pppmm">
                <div style="writing-mode: vertical-rl; height: 35px">采购主管</div>
                <!-- <div><img style="width: 45px" src="@img/singe/4.png" /></div> -->
              </div>
            </a-col>
            <a-col :flex="2">
              <div class="pppmm">
                <div style="writing-mode: vertical-rl">采购员</div>
                <div class="comtunbuim">{{ topTabel?.ProcurementStaffname }}</div>
              </div>
            </a-col>
            <a-col :flex="2">
              <div class="pppmm">
                <div style="writing-mode: vertical-rl">制单人</div>
                <div class="comtunbuim">{{ topTabel?.ProcurementStaffname }}</div>
              </div>
            </a-col>
          </a-row>
          <a-row>
            <a-col :flex="4"> 白联:采购存根联 红联:QC联</a-col>
            <a-col :flex="2"> <span style="padding: 5px"></span>蓝联:仓库联 </a-col>
            <a-col :flex="2"> 请款联 </a-col>
            <a-col :flex="2"> </a-col>
            <a-col :flex="2">(FM-06-003D) </a-col>
          </a-row>
        </div>
      </template>
    </div>
  </div>
</template>

<script lang="ts">
import { toRefs } from 'vue';
import importConfig from './purchaseOrderPrintTwo';
import { categoriesTaxesList } from '@/utils/base';
import { multiplication } from '@/utils/calculationFormula';
export default {
  setup() {
    const { base, init, timeCange, printPages } = importConfig();
    init();
    return {
      ...toRefs(base),
      init,
      timeCange,
      categoriesTaxesList,
      multiplication,
      printPages,
    };
  },
};
</script>

<style lang="less" scoped>
.purchaseOrder {
  color: #333;
  font-size: 12px;
  // padding: 15px;
  width: 720px;
  &-titleName {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
  }
  &-adderm {
    text-align: center;
  }
  &-phonelist {
    text-align: center;
    font-size: 12px;
  }
  &-optionName {
    text-align: center;
    font-weight: bold;
    letter-spacing: 2px;
    text-decoration: underline;
  }
  &-colsnpm {
    display: flex;
    &-titleName {
      text-align: left;
      width: 65px;
      padding-right: 10px;
    }
  }
  &-tableppm {
    &-itemTim {
      display: flex;
      text-align: center;
      border: 1px solid #777;
      height: 100%;
      justify-content: center;
      align-content: center;
      align-items: center;
      &-pdinag {
        padding: 5px;
        height: 35px;
      }
    }
    &-apmcaoisa {
      display: flex;
      border: 1px solid #777;
      height: 100%;
      justify-content: flex-end;
      align-content: center;
      align-items: center;
    }
  }
  &-bottomcx {
    &-hotttom {
      &-tipxoan {
        border: 1px solid #777;
        height: 100%;
        &-rember {
          display: inline-block;
          width: 50px;
        }
      }
    }
    &-singha {
      height: 100%;
      border: 1px solid #777;
    }
  }
  .gonmz {
    margin-top: 5px;
  }
  .pppmm {
    display: flex;
  }
  &-boxOpmm {
    height: 480px;
  }
}
.comtunbuim {
  width: 50px;
  justify-content: center;
  display: flex;
  justify-items: center;
  align-items: center;
}
.asciojm {
  border: 1px solid #777;
  text-align: center;
  width: 100%;
  padding: 8.1px 0;
}
.asopcam {
  border: 1px solid #777;
  text-align: center;
  width: 100%;
}
</style>
